<template>
  <el-row>
    <!--  -->
    <el-col :span="14">
      <el-card class="card-height">
        <div slot="header" class="clearfix">
          <span>机构概述</span>
        </div>
        <div class="organization">
          <div class="left-content">
            <p class="organName">{{ organOverview.organName }}</p>
            <p>地址:{{ organOverview.organAddress }}</p>
            <p>负责人:{{ organOverview.principal }} {{ organOverview.phone }}</p>
            <el-button @click="isShowMap=true">查看营业部分布</el-button>
          </div>
          <div class="right-content">
            <div class="item">
              <div>
                <p>分拣中心(个)</p>
                <span>{{ organOverview.sortingCenterNumber }}</span>
              </div>
            </div>
            <div class="item">
              <div>
                <p>营业部(个)</p>
                <span>{{ organOverview.agencyNumber }}</span>
              </div>
            </div>
            <div class="item">
              <div>
                <p>司机人数(个)</p>
                <span>{{ organOverview.driverNumber }}</span>
              </div>
            </div>
            <div class="item">
              <div>
                <p>快递员人数(个)</p>
                <span>{{ organOverview.courierNumber }}</span>
              </div>
            </div>
          </div>
        </div>

      </el-card>
    </el-col>
    <!--  -->
    <el-col :span="10">
      <el-card class="card-height">
        <div slot="header" class="clearfix">
          <span>今日数据</span>
          <i style="float: right; padding: 3px 0" class="el-icon-refresh">2023-02-15 14:36</i>
        </div>
        <div class="todayData">
          <div class="data">
            <p>订单金额(元)</p>
            <div class="orderAmount">{{ todayData.orderAmount }}</div>
            <div>
              <span>较昨日 +{{ todayData.orderAmountChanges }}</span>
              <i class="el-icon-top" style="color:#e15536" />
            </div>
          </div>
          <div class="data">
            <p>订单数量(笔)</p>
            <div class="orderAmount">{{ todayData.orderNumber }}</div>
            <div>
              <span>较昨日 +{{ todayData.orderNumberChanges }}</span>
              <i class="el-icon-top" style="color:#e15536" />
            </div>
          </div>
          <div class="data">
            <p>运输任务(次)</p>
            <div class="orderAmount">{{ todayData.transportTaskNumber }}</div>
            <div>
              <span>较昨日 +{{ todayData.transportTaskNumberChanges }}</span>
              <i class="el-icon-top" style="color:#e15536" />
            </div>
          </div>
        </div>
      </el-card>
    </el-col>
    <!-- 弹层 -->
    <el-dialog :visible="isShowMap" @close="handleClose">
      <div class="close-btn" @click="handleClose" />
      <img class="mapImg" src="https://slwl-admin.itheima.net/static/img/department_map.7a0c7499.png" alt="">
    </el-dialog>
  </el-row>
</template>

<script>
export default {
  props: {
    organOverview: {
      type: Object,
      default: () => {}
    },
    todayData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isShowMap: false
    }
  },
  methods: {
    handleClose() {
      this.isShowMap = false
    }
  }
}
</script>

<style lang="scss" scoped>
.organization{
  display: flex;
  .left-content{
    flex: 1;
    border-right: 1px solid #ebeef5;
    p{
      font-size: 14px;
      color: #818693;
    }
    .organName{
      margin-top: 20px;
      font-size: 16px;
      color: #303133;
    }
    .el-button{
      margin-top: 20px;
      font-size: 14px;
      color: #e15536;
      width: 158px;
      height: 40px;
      background: #ffeeeb;
      border: 1px solid #f3917c;
      border-radius: 4px;
      cursor: pointer;
    }
  }
  .right-content{
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    .item{
      flex: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      // justify-content: center;
      div{
        width: 120px;
        span{
        font-size: 32px;
        font-weight: 700;
        color: #e15536;
        cursor: pointer;
      }
      }
    }
  }
}
.todayData{
  display: flex;
  justify-content: space-around;
  .data{
    display: flex;
    flex-direction: column;
    // justify-content: space-around;
    p{
     font-size: 14px;
     color: #20232a;
     margin-bottom: 21px;
    }
    .orderAmount{
     font-size: 36px;
     color: #20232a;
     font-weight: 700;
     margin-bottom: 24px;
    }
    span{
     font-size: 14px;
     color: #818693;
     margin-bottom: 20px;
    }
  }
}
::v-deep .el-dialog{
  .el-dialog__header{
    display: none;
  }
  .el-dialog__body{
    padding: 0;
   .close-btn{
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    right: 18px;
    top: 15px;
    cursor: pointer;
   }
    .mapImg{
     width: 100%;
    }
  }
}

</style>
